<template>
  <div class="quality-recommend">
    <!-- <div class="slider-banner swiper" v-if="imgUrls.length">
			<view class="swiper">
				<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
				 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.pic" class="slide-image"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
    </div>
    <div class="title acea-row row-center-wrapper">
      <div class="line"></div>
      <div class="name">
        <span class="iconfont" :class="icon"></span>{{ name }}
      </div>
      <div class="line"></div>
    </div> -->
	<view>
		<image style="width: 331rpx;height: 88rpx;margin-top: 30rpx;margin-left: 100rpx;" :src="imgUrl"></image>
		<view style="margin-left: 100rpx;line-height: 50rpx;font-size: 32rpx;">{{name}}</view>
	</view>
		<view class="wrapper">
			<!-- <GoodList :bastList="goodsList" :is-sort="false" :isLogin='isLogin'></GoodList> -->
			<view style="padding: 20rpx 20rpx 0 0;">
				<view v-for="(item,index) in goodsList" :key="index" @click="goDetail(item)" style="width: 365rpx;padding-left: 20rpx;float: left;">
					<image :src="item.image" style="width: 345rpx;height: 345rpx;"></image>
					<view style="padding: 20rpx;">
						<view style="font-size: 24rpx;height: 64rpx;" class="line2">{{item.store_name}}</view>
						
						<view class='money font-color' style="display: block;" :class='is_switch==true?"":"on"'>
							￥<text class='num'>{{toFixed(item.price)}}</text>
							<!-- <text style="color: #dadada;text-decoration: line-through;font-size: 20rpx;margin-left: 10rpx;">{{item.ot_price}}</text>
							<view :class="is_switch ? 'ticket' : 'ticket-big' " v-if="item.issetCoupon">领券</view> -->
							<text style="color: #dadada;text-decoration: line-through;font-size: 20rpx;margin-left: 10rpx;margin-top: 10rpx;">{{item.ot_price}}</text>
							<view class="score" style="float: right;margin-top: 12rpx;font-weight: 500;">{{ item.rate }}评分</view>
						</view>
						
						<!-- <view class="score">{{item.rate}}评分 {{item.reply_count}}条评论</view> -->
						<view class="company" v-if="item.merchant" @click.stop="goShop(item)">
							{{item.merchant.mer_name}}
							<view class="flex">
								<!-- 进店 -->
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
				</view>
				<view style="clear: both;"></view>
			</view>
			<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
			<emptyPage v-if="goodsList.length==0 && !isScroll" title="暂无数据~"></emptyPage>
		</view>
  </div>
</template>
<script>
import emptyPage from '@/components/emptyPage.vue'
import GoodList from "@/components/goodList";
import { getIndexData } from '@/api/api.js';
import { getGroomList,getHotBanner } from "@/api/store";
import util from "@/utils/util";
import { mapGetters } from "vuex";
import { goShopDetail } from '@/libs/order.js'
const typeData = {
	best:{
		icon:'icon-jingpintuijian',
		name:'尖货限量'
	},
	hot:{
		icon:'icon-remen',
		name:'热门榜单'
	},
	new:{
		icon:'icon-xinpin',
		name:'尚新品'
	},
	good:{
		icon:'icon-xinpin',
		name:'折扣专区'
	},
}

export default {
  computed: mapGetters(['isLogin']),
  name: "HotNewGoods",
  components: {
    GoodList,
		emptyPage,
  },
  props: {},
  data: function() {
    return {
      imgUrls: [],
      goodsList: [],
      name: "",
	  hotData:[],
	  loaded:false,
      icon: "",
		type:0,
		autoplay:true,
		circular:true,
		interval: 3000,
		duration: 500,
		page:1,
		limit:8,
		isScroll:true,
		imgUrl: ''
    };
  },
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function() {
	  let that = this;
  	wx.showShareMenu({
  	      withShareTicket: true,
  	      menus: ['shareAppMessage', 'shareTimeline']
  	    })	
  	return {
  		title: that.name || '',
  		path: 'pages/columnGoods/HotNewGoods/index?type='+that.type,
  	}
  },
  onShareTimeline: function() {
	  let that = this;
  	return {
  		title:  that.name || '',
  		  query: {
  		    type: that.type
  		  },
  		  imageUrl: ''
  		}      
  },
  // #endif
  onLoad: function(option) {
	this.type = option.type
    this.getIndexGroomList();
	this.getHotBanner();
	getIndexData().then(res=>{
		this.hotData = res.data.hot;
		this.imgUrl = res.data.cate_top_img;
	}).finally(e=>{
		this.loaded = true;
		this.titleInfo();
	});
  },
  watch:{
	name(n){
		uni.setNavigationBarTitle({
			title:n||'加载中'
		})
	}  
  },
  methods: {
	  toFixed(num) {
	  	num = parseFloat(num);
	  	return num.toFixed(0);
	  },
	  goDetail(item){
	  	goShopDetail(item, this.uid).then(res => {
	  	if (this.isLogin) {
	  			initiateAssistApi(item.activity_id).then(res => {
	  				let id = res.data.product_assist_set_id;
	  				uni.hideLoading();
	  				// #ifndef MP
	  				uni.navigateTo({
	  					url: '/pages/activity/assist_detail/index?id=' + id
	  				});
	  				// #endif
	  				// #ifdef MP
	  				openBargainSubscribe().then(res => {
	  					uni.hideLoading();
	  					uni.navigateTo({
	  						url: '/pages/activity/assist_detail/index?id=' + id
	  					});
	  				}).catch((err) => {
	  					uni.hideLoading();
	  				});
	  				// #endif					
	  			}).catch((err) => {
	  				uni.showToast({
	  					title: err,
	  					icon: 'none'
	  				})
	  			});
	  		} else {
	  			// #ifdef H5 || APP-PLUS
	  			toLogin();
	  			// #endif 
	  			// #ifdef MP
	  			this.$emit('isShowAuth', true);
	  			this.$emit('isAuto', true);
	  			// #endif
	  		}
	  	})		
	  },
	  // 去店铺
	  goShop(item){
	  	if(this.hide_mer_status != 1){
	  		uni.navigateTo({
	  			url:`/pages/store/home/index?id=${item.mer_id}`
	  		})
	  	}			
	  },
    titleInfo: function() {
      if(!this.loaded){
      	this.name = '';
      	this.icon = '';
      }else{
      	let name = (typeData[this.type]||{}).name || '精品推荐';
		let url = this.$route ? this.$route.fullPath : ('/' + util.getNowUrl());
      	this.hotData.forEach(data=>{
      		if(data.url == url) name = data.title;
      	})
      	this.name = name;
      	this.icon = (typeData[this.type]||{}).icon || 'icon-jingpintuijian';
      }
    },
    getIndexGroomList: function() {
			if(!this.isScroll) return
      let that = this;
      let type = this.type;
      getGroomList(type,{
				page:this.page,
				limit:this.limit
			}).then(res => {
         
          that.goodsList = that.goodsList.concat(res.data.list);
					that.isScroll = res.data.list.length>=that.limit
					that.page++
        })
        .catch(function(res) {
          that.$util.Tips({ title: res });
        });
    },
	getHotBanner(){
		let that = this
		getHotBanner(this.type).then(res=>{
			that.imgUrls = res.data;
		})
		}
  },
	onReachBottom() {
		this.getIndexGroomList()
	}
};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss">
	.swiper,swiper,swiper-item,.slide-image{
		width: 100%;
		height: 280rpx;
	}
	.quality-recommend {
		.wrapper{
			background: #fff;
		}
		.title {
	    height: 120rpx;
	    font-size:32rpx;
	    color: #282828;
	    background-color: #f5f5f5;
			.line{
				width: 230rpx;
				height: 2rpx;
				background-color: #e9e9e9;
			}
		}	
	}
	.txt-bar{
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666;
	}
	.company {
		display: flex;
		align-items: center;
		color: #737373;
		font-size: 20rpx;
		margin-top: 10rpx;
	
		.flex {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			color: #282828;
	
			.iconfont {
				font-size: 16rpx;
				margin-top: 4rpx;
			}
		}
	}
	.score {
		margin-top: 10rpx;
		color: #737373;
		font-size: 20rpx;
	}
	
.money {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	
	.on {
		margin-top: 30rpx;
	}
	
 .num {
		font-size: 34rpx;
	}
	
	.ticket {
		margin-left: 10rpx;
		padding: 0 5rpx;
		font-weight: initial;
		font-size: 20rpx;
		border: 1px solid $theme-color;
		border-radius: 4rpx;
	}
	
	.ticket-big {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 163rpx;
		height: 28rpx;
		margin-left: 10rpx;
		background-image: url(~static/images/yh.png);
		background-size: 100% 100%;
		font-size: 20rpx;
		font-weight: normal;
	}
	}
	
</style>